<template>
<div>
  <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
    <el-breadcrumb-item :to="{ path: '/' }">后台管理</el-breadcrumb-item>
    <el-breadcrumb-item>轮播图列表</el-breadcrumb-item>
  </el-breadcrumb>
  <el-divider></el-divider>

  <el-table
            :data="bannerArr"
            style="width: 100%">
    <!--type=index 设置这一列显示的内容为编号-->
    <el-table-column type="index" label="编号"></el-table-column>
    <el-table-column
        label="轮播图"
        width="180">
      <template slot-scope="scope">
        <!--scope.row代表当前行对应数组中的对象-->
        <img :src="scope.row.url" width="100%">
      </template>
    </el-table-column>

    <el-table-column label="操作" width="120" align="center">
      <template slot-scope="scope">

        <el-button type="danger" icon="el-icon-delete"circle size="mini"
                   @click="openDeleteConfirm(scope.row)"></el-button>
      </template>
    </el-table-column>

  </el-table>
  <el-upload
      action="http://localhost:8080/upload"
      name="pic"
      limit=1
      list-type="picture-card"
      :on-success="handleSuccess"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove">
    <i class="el-icon-plus"></i>
  </el-upload>
  <el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
  </el-dialog>

  <el-button type="warning" @click="insert()">上传</el-button>

</div>
</template>

<script>
export default {
  name: "BannerView",
  data(){
    return{
      bannerArr:[],

      count:0,
      dialogImageUrl: '',
      dialogVisible: false,
      url:"",
    }
  },
  methods:{
    handleRemove(file, fileList) {
      console.log(file, fileList)
      this.axios.get("http://localhost:8080/remove?url="+this.url).then((response) => {
        this.$message("服务器删除完成")
        this.url="";
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(respose,file,fileList){
      this.url=respose;
      for (let i= this.count;i<this.count+1;i++){
        this.bannerArr[i]=this.url;
        console.log(this.bannerArr)
      }
      this.count+=1
    },
    insert(){
      if(this.url==""){
        this.$message.error("请选择图片")
        return;
      }
      let url = 'http://localhost:8080/banners/addNew?url='+this.url;
      console.log(url);
      this.axios.get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.ruleForm = responseBody.data;
          this.loadbannerList();
        } else {
          this.$message.error(responseBody.message);
          this.loadbannerList();
        }
      });
    },

    bannerDelete(banner) {
      let url = 'http://localhost:8080/banners/' + banner.id + '/delete';
      console.log('url = ' + url);
      this.axios.post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state != 20000) {
          this.$message.error(responseBody.message);
        }
        if (responseBody.state == 20000 || responseBody.state == 40400) {
          this.loadbannerList();
        }
      });
    },
      openDeleteConfirm(banner) {
        let message = '此操作将永久删除该轮播图，是否继续？';
        this.$confirm(message, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.bannerDelete(banner);
        }).catch(() => {
        });
      },

  loadbannerList(){
      console.log('loadbannerList');
      let url = 'http://localhost:8080/banners';
      console.log('url = ' + url);
      this.axios.get(url).then((response) => {
        let responseBody = response.data;
        this.bannerArr = responseBody.data;
      });
    },

  },
  mounted() {
    this.loadbannerList();
  }

}
</script>

<style scoped>

</style>